<template>
  <div class="wert">
    <el-card class="cards">
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="2" style="text-align: center; line-height: 40px">
          服务类型:
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="rulefrom.radios">
            <el-radio label="1" size="large" border>司法存证</el-radio>
            <el-radio label="2" size="large" border>自定义</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2" style="text-align: center; line-height: 40px">
          选择套餐
        </el-col>
        <el-col :span="21">
          <el-radio-group v-model="rulefrom.radio" style="width: 47%">
            <el-radio
              v-for="item in mealist"
              :key="item._id"
              :label="item._id"
              v-show="rulefrom.radios == '1'"
              size="large"
              @click="radio(item)"
              style="width: 100%; margin-bottom: 3%; height: 47px"
              border
            >
              <template #default>
                <span style="margin: 0 3%; margin-right: 10%; color: #000">{{
                  item.mealName
                }}</span
                ><span class="span_two">{{ item.product }}条</span>
                <span class="span_three">{{ item.discount * 10 }}折</span>
                <span class="span_four"
                  >单价:￥
                  {{ item.original_cost / item.product }}
                </span>
              </template>
            </el-radio>
            <!-- 自定义 -->
            <el-radio
              v-model="values"
              size="large"
              v-show="rulefrom.radios == '2'"
              style="width: 94%; margin-bottom: 3%; height: 47px"
              border
            >
              <template #default>
                <span style="margin: 0 3%; margin-right: 10%; color: #000"
                  >自定义</span
                >
                <el-input-number v-model="values" :min="1" />
                <span class="span_two">单价:￥5.00</span>
              </template>
            </el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="3"> </el-col>
        <el-col :span="21" style="margin-top: 4%">
          想购买更多？请联系我们，获取专属优惠 （1812355563@qq.com）
        </el-col>
        <el-col :span="3" style="margin-top: 0.5%"> </el-col>
        <el-col :span="21" style="margin-top: 0.5%; font-weight: 800">
          温馨提示
        </el-col>
        <el-col :span="3" style="margin-top: 0.5%"> </el-col>
        <el-col :span="21" style="margin-top: 0.5%">
          链上部署充值可能存在3～5分钟到账延迟，请耐心等待服务生效；
        </el-col>
        <el-col :span="24">
          <div class="fet">
            <span class="spt">总金额：{{ totalPrice.total }}元</span>
            <span class="spt">
              已{{ totalPrice.discount || 0 }}折优惠：¥{{ totalPrice.fracture }}
            </span>
            <span class="spt">
              应付款：<span style="color: red"
                >￥{{ totalPrice.price }}</span
              ></span
            >
            <el-button type="primary" @click="toupst">支付宝支付</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";
import { ElLoading } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const store = useStore();
onMounted(() => {
  getMeal();
});
let mealist = ref([]);

let meal = ref({});
const getMeal = async () => {
  let { data } = await axios.get("/api/mealprice/meals/?page=1&pagesize=20");
  data.data.map((item) => {
    if (item.status != false) {
      mealist.value.push(item);
    }
  });
};
const radio = (item) => {
  meal.value = item;
  totalPrice.value.total = item.original_cost;
  totalPrice.value.discount = item.discount * 10;
  totalPrice.value.fracture =
    item.original_cost - item.original_cost * item.discount;
  totalPrice.value.price = item.original_cost - totalPrice.value.fracture;
};
let rulefrom = reactive({
  radios: "1",
  radio: "",
});
let totalPrice = ref({
  total: 0, //总金额
  discount: null, //折扣
  price: 0, //应付款
  fracture: 0, //已优惠
});
let loadsh = ref(false);
let toupst = async () => {
  if (totalPrice.value.price == 0) {
    ElMessage({
      message: "请选择套餐",
      type: "warning",
    });
    return;
  }
  let platform = "1107";
  let r1 = Math.floor(Math.random() * 70);
  let r2 = Math.floor(Math.random() * 20);
  let sysDate = new Date().getTime();
  var orderId = platform + r1 + sysDate + r2;
  let obj = {
    orderPrice: totalPrice.value.price.toFixed(2), //应付款
    customID: store.state.user._id, //用户id
    payment: meal.value.type_id.existingName, //支付类型
    orderNum: 1, //订单数量
    productID: meal.value.mealName, //产品名称
    mobile: store.state.user.phone, //手机号
    orderID: orderId, //订单编号,
    existingNum: meal.value.product, //产品数量
  };
  let { data } = await axios.post("/api/order/pay", {
    price: totalPrice.value.price.toFixed(2),
    mealName: meal.value,
  });
  if (data.code == 200) {
    const loading = ElLoading.service({
      lock: true,
      text: "等待跳转支付页面",
      background: "rgba(0, 0, 0, 0.7)",
    });
    setTimeout(() => {
      setTimeout(() => {
        loading.close();
      }, 2000);
      window.open(data.result);
    }, 2000);
    setTimeout(async () => {
      if (confirm("确认支付成功！") == true) {
        obj.parStatus = true;
        let { data } = await axios.post("/api/order/addOrder", obj);
        if (data.code == 200) {
          return ElMessage({
            message: "司法存证购买成功",
            type: "success",
          });
        } else if (data.code == 201) {
          return ElMessage({
            message: "普通存证购买成功",
            type: "success",
          });
        }
        return true;
      } else {
        obj.parStatus = false;
        let { data } = await axios.post("/api/order/addOrder", obj);
        if (data.code == 201) {
          return ElMessage({
            message: "您取消了支付",
            type: "warning",
          });
        }
      }
    }, 5000);
  }
};
let values = ref("1");
</script>

<style lang="less" scoped>
.wert {
  width: 100%;
  height: 90%;

  .cards {
    width: 95%;
    margin: 0 auto;
    height: 95%;
    margin-top: 1.7%;

    .el-col {
      margin-top: 2%;

      .fet {
        width: 80%;
        height: 60px;
        margin: 0 auto;
        background-color: #ddd;
        position: fixed;
        bottom: 5%;
        .spt:first-child {
          margin-left: 45%;
          line-height: 60px;
        }
        .spt {
          margin-right: 4%;
        }
        .spt,
        .el-button {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
}
.span_two {
  margin: 0 14%;
  color: #000;
  display: inline-block;
  width: 60px;
  text-align: center;
}
.span_three {
  margin: 0 10%;
  display: inline-block;
  width: 50px;
  text-align: center;
  height: 20px;
  border-radius: 10px;
  background-color: #fff1e5;
  color: red;
}
.span_four {
  margin-left: 20%;
  color: #000;
  display: inline-block;
  width: 70px;
}
</style>
